<template>
    <div class="flex">
        <V3Echarts :width="props.width" :height="props.height" :options="option" :top="10" container="container3" />
    </div>
</template>

<script lang="ts" setup>
import { onBeforeUnmount, ref, watch } from 'vue'
import { AXIS_LABEL, LEGEND, LINE_TOOLTIP, YAXIS_NAME } from '../chartConfig'
import * as echarts from 'echarts'
import V3Echarts from '@/stories/components/V3Echarts/index.vue'

const props = defineProps({
    autoChange: {
        type: Boolean,
        require: false,
        default: false
    },
    chartData: {
        type: Object,
        default: () => {
            return {
                unit: '辆',
                xAxis: ['12/3', '12/4', '12/5', '12/6', '12/7', '12/8', '12/9'],
                value: [
                    {
                        name: '入园',
                        data: [47.9, 55.2, 61.2, 68.3, 79.5, 82, 88.44]
                    },
                    {
                        name: '出园',
                        data: [27.9, 25.2, 31.2, 38.3, 39.5, 22, 38.44]
                    }
                ]
            }
        }
    },
    color: {
        type: Array,
        default: () => {
            return ['#6893ff', '#64eca4', '#ffdf87', '#e5e3a8']
        }
    },
    width: {
        type: Number,
        default: 1000
    },
    height: {
        type: Number,
        default: 450
    },
    splitNumber: {
        type: Number,
        default: 5
    },
    barWidth: {
        type: Number,
        default: 5
    },
    interval: {
        type: Boolean,
        default: 'auto'
    }
})
let option = ref<any>({})

const initChart = () => {
    option.value = option1()
}

const option1 = () => {
    let series: any = []
    const axis_label = JSON.parse(JSON.stringify(AXIS_LABEL))
    axis_label.interval = props.interval
    props.chartData.value.forEach((item: any, index: number) => {
        series.push({
            name: item.name,
            type: 'bar',
            data: item.data,
            symbol: 'none',
            barWidth: props.barWidth,
            yAxisIndex: item.yAxisIndex || 0,
            itemStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(
                        0,
                        0,
                        0,
                        1,
                        [
                            {
                                offset: 0.05,
                                color: props.color[index] + '' // 0% 处的颜色
                            },
                            {
                                offset: 1,
                                color: props.color[index] + '11' // 100% 处的颜色
                            }
                        ],
                        false
                    )
                }
            },
            universalTransition: {
                enabled: true,
                delay: function () {
                    return Math.random() * 400
                }
            }
        })
    })
    return {
        tooltip: LINE_TOOLTIP,
        color: props.color,
        legend: {
            itemWidth: 25,
            itemHeight: 10,
            itemGap: 10,
            top: '5%',
            right: '5%',
            textStyle: LEGEND,
            data: props.chartData.data
        },
        grid: {
            top: '30%',
            left: '0%',
            right: '5%',
            bottom: '0%',
            containLabel: true
        },
        xAxis: {
            type: 'category',
            data: props.chartData.xAxis,
            axisLabel: axis_label,
            axisLine: {
                show: true
            },

            boundaryGap: true,
            splitLine: {
                show: false //隐藏或显示
            }
        },
        yAxis: [
            {
                type: 'value',
                name: props.chartData.unit,
                offset: 0,
                axisLine: {
                    show: true
                },
                axisLabel: AXIS_LABEL,
                nameGap: 10,
                splitNumber: props.splitNumber,
                nameTextStyle: YAXIS_NAME,
                splitLine: {
                    show: false //隐藏或显示
                }
            },
            {
                type: 'value',
                name: props.chartData.unit2,
                position: 'right',
                offset: 0,
                axisLine: {
                    show: true
                },
                axisLabel: AXIS_LABEL,
                nameGap: 10,
                splitNumber: props.splitNumber,
                nameTextStyle: YAXIS_NAME,
                splitLine: {
                    show: false //隐藏或显示
                }
            }
        ],
        series: series
    }
}

const option2 = () => {
    let series: any = []
    const axis_label = JSON.parse(JSON.stringify(AXIS_LABEL))
    axis_label.interval = props.interval
    props.chartData.value.forEach((item: any, index: number) => {
        series.push({
            name: item.name,
            type: 'pictorialBar',
            barWidth: '60%',
            stack: '总量',
            yAxisIndex: item.yAxisIndex || 0,
            label: {
                normal: {
                    show: false
                }
            },
            itemStyle: {
                normal: {
                    color: {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [
                            {
                                offset: 0,
                                color: props.color[index] + '' // 0% 处的颜色
                            },
                            {
                                offset: 1,
                                color: 'rgba(0, 34, 66, 0.2)' // 100% 处的颜色
                            }
                        ],
                        globalCoord: false // 缺省为 false
                    } //渐变颜色
                }
            },
            symbol: 'path://M12.000,-0.000 C12.000,-0.000 16.074,60.121 22.731,60.121 C26.173,60.121 -3.234,60.121 0.511,60.121 C7.072,60.121 12.000,-0.000 12.000,-0.000 Z',

            data: item.data,
            barGap: '-80%',
            universalTransition: {
                enabled: true,
                delay: function () {
                    return Math.random() * 400
                }
            }
        })
    })
    return {
        legend: {
            itemWidth: 25,
            itemHeight: 10,
            itemGap: 10,
            top: '5%',
            right: '5%',
            textStyle: LEGEND,
            data: props.chartData.data
        },
        tooltip: LINE_TOOLTIP,
        grid: {
            top: '30%',
            left: '0%',
            right: '5%',
            bottom: '0%',
            containLabel: true
        },
        xAxis: {
            type: 'category',
            data: props.chartData.xAxis,
            axisLabel: axis_label,
            axisLine: {
                show: true
            },

            boundaryGap: true,
            splitLine: {
                show: false //隐藏或显示
            }
        },
        yAxis: [
            {
                type: 'value',
                name: props.chartData.unit,
                offset: 0,
                axisLine: {
                    show: true
                },
                axisLabel: AXIS_LABEL,
                nameGap: 10,
                splitNumber: props.splitNumber,
                nameTextStyle: YAXIS_NAME,
                splitLine: {
                    show: false //隐藏或显示
                }
            },
            {
                type: 'value',
                name: props.chartData.unit2,
                position: 'right',
                offset: 0,
                axisLine: {
                    show: true
                },
                axisLabel: AXIS_LABEL,
                nameGap: 10,
                splitNumber: props.splitNumber,
                nameTextStyle: YAXIS_NAME,
                splitLine: {
                    show: false //隐藏或显示
                }
            }
        ],
        series
    }
}
let timer: any = null

onBeforeUnmount(() => {
    timer && props.autoChange && clearInterval(timer)
})

watch(
    () => props,
    newValue => {
        initChart()
        if (props.autoChange) {
            let index = 1
            timer = setInterval(() => {
                if (index == 2) index = 0
                option.value = index == 0 ? option1() : option2()
                index++
            }, 5000)
        } else {
            timer && props.autoChange && clearInterval(timer)
        }
    },
    { immediate: true, deep: true }
)
</script>

<style lang="scss" scoped>
.flex {
    width: 100%;
    height: v-bind('props.height');
}
</style>
